<template>
  <section class="profile">
    <!-- <HeaderTop title="我的"/> -->
    <section class="profile-number">
      <router-link :to="userInfo._id ? '/userinfo': '/login'" class="profile-link">
        <div class="profile_image">
          <!--v-real-img 就是刚刚定义的指令，绑定的为真实要显示的图片地址。src为默认图片地址-->
          <img src="./images/missing-face.png" v-real-img="userInfo.img">
        </div>
		<div class="user-right">
			<div class="user-info">
			  <p class="user-info-top" >{{userInfo.name || '登录/注册'}}</p>
			  <p>
			        <span class="user-icon">
			          <i class="iconfont icon-shouji icon-mobile"></i>
			        </span>
			    <span class="icon-mobile-number">{{userInfo.phone || '未认证'}}</span>
			  </p>
			</div>
			<span class="arrow">
				请完善个人资料
                  <i class="iconfont icon-iconfontjiantou3" style="float:right;"></i>
			</span>
		</div>
     
      </router-link>
    </section>
   
    <section class="profile_my_order border-1px">
      <!-- 我的收益 -->
       <router-link to="/my-polify" class="my_order">
           <span>
                 <i class="iconfont icon-order-s"></i>
           </span>
           <div class="my_order_div">
             <span>我的收益</span>
             <span class="my_order_icon">
                   <i class="iconfont icon-iconfontjiantou3"></i>
             </span>
           </div>
           
       </router-link>   
      <!-- 银行卡 -->
      <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-jifen"></i>
            </span>
        <div class="my_order_div">
          <span>银行卡</span>
          <span class="my_order_icon">
                <i class="iconfont icon-iconfontjiantou3"></i>
              </span>
        </div>
      </a>
      <!-- 租客合同 -->
      <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-vip"></i>
            </span>
        <div class="my_order_div">
          <span>租客合同</span>
          <span class="my_order_icon">
                <i class="iconfont icon-iconfontjiantou3"></i>
              </span>
        </div>
      </a>
   <!-- 邀请好友-->
   <a href="javascript:;" class="my_order">
         <span>
           <i class="iconfont icon-yqhy"></i>
         </span>
     <div class="my_order_div">
       <span>邀请好友</span>
       <span class="my_order_icon">
             <i class="iconfont icon-iconfontjiantou3"></i>
           </span>
     </div>
   </a>
   
      <!-- 我的认证 -->
      <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-fuwu"></i>
            </span>
        <div class="my_order_div">
          <span>我的认证</span>
          <span class="my_order_icon">
                <i class="iconfont icon-iconfontjiantou3"></i>
              </span>
        </div>
      </a>
	  <!-- 合同管理 -->
	  <a href="javascript:" class="my_order">
	        <span>
	          <i class="iconfont icon-ht"></i>
	        </span>
	    <div class="my_order_div">
	      <span>合同管理</span>
	      <span class="my_order_icon">
	            <i class="iconfont icon-iconfontjiantou3"></i>
	          </span>
	    </div>
	  </a>
	  <!-- 设置 -->
	  <a href="javascript:" class="my_order">
	        <span>
	          <i class="iconfont icon-set"></i>
	        </span>
	    <div class="my_order_div">
	      <span>设置</span>
	      <span class="my_order_icon">
	            <i class="iconfont icon-iconfontjiantou3"></i>
	          </span>
	    </div>
	  </a>
    </section>

    <section class="profile_my_bottom border-1px">
      <mt-button type="primary" style="width: 80%" v-if="userInfo._id" @click="logout">退出登陆</mt-button>
    </section>
  </section>
</template>

<script>
  import {mapState} from 'vuex'
  import { MessageBox, Toast } from 'mint-ui'
  import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
  export default {
    computed: {
      ...mapState(['userInfo'])
    },
    data(){
        return{
            imgUrl:""
        } 
    },
    methods: {
      logout () {
        MessageBox.confirm('确认退出吗?').then(
          action => {
            // 请求退出
            this.$store.dispatch('logout')
            Toast('登出完成')
          },
          action => {
            console.log('点击了取消')
          }
        );
      }
    },

    components: {
      HeaderTop
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .profile //我的
    width 100%
    overflow hidden

    .profile-number
      margin-top 45.5px
      .profile-link
        clearFix()
        position relative
        display block
        // background #02a774
        padding 20px 10px
        .profile_image
          float left
          width 60px
          height 60px
          border-radius 50%
          overflow hidden
          vertical-align top
          img 
            width 100%
            height 100%
          .icon-person
            background #e4e4e4
            font-size 62px
        .user-right
           display flex
           justify-content space-between
        .user-info
          float left
          margin-top 8px
          margin-left 15px
          p
            font-weight: 700
            font-size 18px
            color black
            &.user-info-top
              padding-bottom 8px
            .user-icon
              display inline-block
              margin-left -15px
              margin-right 5px
              width 20px
              height 20px
              .icon-mobile
                font-size 30px
                vertical-align text-top
            .icon-mobile-number
              font-size 14px
              color black
        .arrow
          position absolute
          right 15px
          top 40%
          .icon-jiantou1
            color black
            font-size 5px
    .profile_info_data
      bottom-border-1px(#e4e4e4)
      width 100%
      background #fff
      overflow hidden
      .info_data_list
        clearFix()
        .info_data_link
          float left
          width 33%
          text-align center
          border-right 1px solid #f1f1f1
          .info_data_top
            display block
            width 100%
            font-size 14px
            color #333
            padding 15px 5px 10px
            span
              display inline-block
              font-size 30px
              color #f90
              font-weight 700
              line-height 30px
          .info_data_bottom
            display inline-block
            font-size 14px
            color #666
            font-weight 400
            padding-bottom 10px
        .info_data_link:nth-of-type(2)
          .info_data_top
            span
              color #ff5f3e
        .info_data_link:nth-of-type(3)
          border 0
          .info_data_top
            span
              color #6ac20b
    .profile_my_bottom
       display flex
      button
       margin 10px auto
       justify-content center          
    .profile_my_order
      top-border-1px(#e4e4e4)
      background #fff

      .my_order
        display flex
        align-items center
        padding-left 15px
        >span
          display flex
          align-items center
          width 20px
          height 20px
          >.iconfont
            margin-left -10px
            font-size 30px
          .icon-order-s
            background-image url("./images/我的收益.png")
          .icon-jifen
            background-image url("./images/wd_yhk@3x.png")
          .icon-vip
            background-image url("./images/wd_zfda@3x.png")
          .icon-fuwu
            background-image url("./images/我的认证.png")     
          .icon-ht
           background-image url("./images/wd_zfda@3x.png")
          .icon-yqhy
            background-image url("./images/邀请好友.png")
          .icon-set
           background-image url("./images/wd_sz@3x.png")
        .my_order_div
          width 100%
          border-bottom 1px solid #f1f1f1
          padding 18px 10px 18px 0
          font-size 16px
          color #333
          display flex
          justify-content space-between
          span
            display block
          .my_order_icon
            width 10px
            height 10px
            .icon-jiantou1
              color #bbb
              font-size 10px
</style>